<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
  <meta charset="UTF-8">
  <title>login</title>
  <style>
    :root {
      /* COLORS ，定义颜色*/
      --white: #e9e9e9;
      --gray: #333;
      --blue: #189ef1;
      --lightblue: #008997;

      /* RADII ，定义按钮大小*/
      --button-radius: 0.7rem;

      /* SIZES ，定义最长宽度和高度*/
      --max-width: 48rem;
      --max-height: 26rem;

      /* 定义字体大小与字体类型 */
      font-size: 1rem;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
        Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    }

    body {
      align-items: center; /*整体居中 */
      background-color: rgb(187, 209, 238);  /* 定义背景颜色为白色 */
      /* 决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。 */
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;  /*覆盖背景 */
      display: grid;  /*方格形式呈现 */
      height: 35rem;  /* 设定相对高度 */
      place-items: center;  /* 居中 */
    }

    /*确定字体的大小*/
    .form__title {
      font-weight: 300;
      margin: 0;
      margin-bottom: 1.25rem;
    }

    /* 存放登录背景的容器设置 */
    .container {
      background-color: var(--white);
      border-radius: var(--button-radius);
      box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25),
        0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
      height: var(--max-height);
      max-width: var(--max-width);
      overflow: hidden;
      position: relative;
      width: 100%;
    }
    /* 容器类型的设置 */
    .container__form {
      height: 100%;
      position: absolute;
      top: 0;
      transition: all 0.6s ease-in-out;
    }
    /* 容器中登录部分的设置 */
    .container--signin {
      left: 0;
      width: 50%;
      z-index: 2;
    }
    /* 容器中右滑登录面板的设置 */ 
    .container.right-panel-active .container--signin {
      transform: translateX(100%);
    }

    /* 容器翻转时被覆盖界面的设置 */
    .container__overlay {
      height: 100%;
      left: 50%;
      overflow: hidden;
      position: absolute;
      top: 0;
      transition: transform 0.6s ease-in-out;
      width: 50%;
      z-index: 100;
    }
    .container.right-panel-active .container__overlay {
      transform: translateX(-100%);
    }

    /* 容器中背景的设置 */
    .overlay {
      background-color: var(--lightblue);
      /* 背景图片的线上插入 */
      background: url("https://pic4.zhimg.com/v2-9ed71e34ccbad60ba2bbdff06da6513f_r.jpg?source=1940ef5c");
      background-attachment: fixed;
      /* 背景位置设置为居中 */
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      /* 高度设置 */
      height: 100%;
      left: -100%;
      /* 将位置设置为相对 */
      position: relative;
      transform: translateX(0);
      transition: transform 0.6s ease-in-out;
      width: 200%;
    }

    /* 覆盖面板设置 */
    .overlay__panel {
      align-items: center;  /* 位于中心 */
      display: flex;  /* 轮廓弯曲呈现 */
      flex-direction: column;
      height: 100%;
      justify-content: center;
      position: absolute;  /*页面绝对位置 */
      text-align: center;  /* 文字居中 */
      top: 0;
      transform: translateX(0);
      transition: transform 0.6s ease-in-out;
      width: 50%;
    }

    /* 按钮设置 */
    .btn {
      /* 按钮颜色设置 */
      background-color: var(--blue);
      background-image: linear-gradient(90deg, var(--blue) 0%, var(--lightblue) 74%);
      border-radius: 20rem;
      /* 按钮边界设置 */
      border: 0.05rem solid var(--blue);
      color: var(--white);
      cursor: pointer;
      font-size: 0.9rem;
      font-weight: bold;
      letter-spacing: 0.1rem;
      padding: 0.9rem 4rem;
      /* 大写 */
      text-transform: uppercase;
      transition: transform 80ms ease-in;
    }

    .form>.btn {
      margin-top: 1.5rem;
    }
    .btn:active {
      transform: scale(0.95);
    }
    .btn:focus {
      outline: none;
    }

    /* 类型设置 */
    .form {
      /* 背景颜色设置 */
      background-color: var(--white);
      /* 弯曲形式呈现 */
      display: flex;
      /* 位于页面中心 */
      align-items: center;
      justify-content: center;
      flex-direction: column;
      padding: 0 3rem;
      height: 100%;
      text-align: center;
    }

    /* 输入设置 */
    .input {
      /* 输入框背景颜色 */
      background-color: #fff;
      /* 设置输入框无边界 */
      border: none;
      padding: 0.9rem 0.9rem;
      margin: 0.5rem 0;
      width: 100%;
    }

  </style>
</head>

<body>
  <h2 class="form__title">欢迎登录您的账号</h2>
  <div class="container right-panel-active">
    <!-- 登录 -->
    <div class="container__form container--signin">
      <form action="/login" method="POST" class="form" id="form2">
        <h2 class="form__title">登录</h2>
        <!-- 用户名输入 -->
        <input type="text" maxlength="10" placeholder="User" class="input" id="username" name="username" value="" required/>
        <!-- 密码输入且自动加密 -->
        <input type="password" maxlength="15" placeholder="Password" class="input" id="password" name="password" value="" required/>
        <!-- 将登录错误信息返回该界面 -->
        <p style = "color:red;" th:text = "${session.msg}"></p>
        <!-- 登录提交按钮 -->
        <button class="btn" type="submit">登录</button>
      </form>
    </div>

    <!-- Overlay 覆盖-->
    <div class="container__overlay">
      <div class="overlay">
      </div>
    </div>
  </div>

</body>

</html>